import {FC} from 'react';
import { ObservableTodoStore } from './store';

type PropsType = {
  todo: ObservableTodoStore;
  del: () => void
}

const ToDoView: FC<PropsType> = (props: PropsType) => {
  const {todo, del} = props;

  function rename() {
    const newName = prompt('请输入新的任务名称', todo.task)
    if(newName) {
      todo.rename(newName);
    }
  }
  function toggleCompleted() {
    todo.toggleDelete()
  }

  const {isCompleted} = todo;

    return (
        <li onDoubleClick={rename}>
          <input type="checkbox" checked={isCompleted} onChange={toggleCompleted}/>
          <span onClick={toggleCompleted} style={{textDecoration: isCompleted ? 'line-through' : ''}}>{todo.task}</span>
          <button onClick={() => del()}>删除</button>
        </li>
    ); 
}

export default ToDoView;